<template>
    <div>
        <el-tabs tab-position="left"  v-model="current">
            <el-tab-pane v-for="item in tab" :key="tab.id" :name="item.content" :label="item.name">
            </el-tab-pane>
            <keep-alive>
            <div v-bind:is="current"></div>
            </keep-alive>
        </el-tabs>
    </div>
</template>
<script>
  export default {
    name: 'index',
    data: function() {
      return {
        tab: [
          { 'id':'1','name': '流量任务', 'content': 'liuliang' },
          { 'id':'2','name': '收藏任务', 'content': 'shoucang' },
          { 'id':'3','name': '加购任务', 'content': 'jiagou' },
          { 'id':'4','name': '微淘直播', 'content': 'zhibou' },
          { 'id':'5','name': '文章阅读', 'content': 'yuedu' },
        ],
        current:'liuliang'
      }
    },
    methods:{
    },
    computed: {
    },
    components: {
      jiagou: resolve => {require(['./task/jiagou.vue'], resolve)},
      liuliang: resolve => {require(['./task/liuliang.vue'], resolve)},
      shoucang: resolve => {require(['./task/shoucang.vue'], resolve)},
      yuedu: resolve => {require(['./task/yuedu.vue'], resolve)},
      zhibou: resolve => {require(['./task/zhibou.vue'], resolve)}
    }
  }
</script>
<style>

</style>
